<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bulma cards</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://unpkg.com/bulma@0.8.0/css/bulma.min.css" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/cards.css">
		<style>
		body {
		background-color: #ccc;
		}

		*  {
		//border: red solid 1px;
		}
.has-text-primary  {
    color: #00b89c !important;
	padding-top: .5em;
}
.fa {
    color: #00b89c;	
}		


.media {
	position: relative;
    margin-top: -100px;
	margin-bottom: -100px;
	background-color: white;
	}
.media-content{
	padding-top: .7em;}

.content-main{
		padding: .6em; }
		
.card .media:not(:last-child) {
    margin-bottom: .5rem;
}
.media-left img {
  //border-radius: 50%;
  //border-top-left-radius: 0%;
  border-bottom-right-radius: 50%;
} 
	
		</style>
</head>
<body>
<div class="container">            
<!-- row1 -->
            <div class="row columns is-multiline">
                <div class="column is-one-third">
                    <div class="card large round">
                        <div class="card-image ">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content ">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content media-content-u ">
                                    <p class="title is-4 no-padding">Atsui</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
							<footer class="card-footer">
								<div class="container">
									<div class="content has-text-centered">
										<div class="soc has-text-primary">
											<a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
										</div>
									</div>
								</div>
							</footer>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large round">
                        <div class="card-image ">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content ">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content media-content-u ">
                                    <p class="title is-4 no-padding">Atsui</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
							<footer class="card-footer">
								<div class="container">
									<div class="content has-text-centered">
										<div class="soc has-text-primary">
											<a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
										</div>
									</div>
								</div>
							</footer>
                        </div>
                    </div>
                </div>
				<div class="column is-one-third">
                    <div class="card large round">
                        <div class="card-image ">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content ">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content media-content-u ">
                                    <p class="title is-4 no-padding">Atsui</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
							<footer class="card-footer">
								<div class="container">
									<div class="content has-text-centered">
										<div class="soc has-text-primary">
											<a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
										</div>
									</div>
								</div>
							</footer>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End row1  -->
<!-- row2 -->
            <div class="row columns is-multiline">
                <div class="column is-one-third">
                    <div class="card large round">
                        <div class="card-image ">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content ">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content media-content-u ">
                                    <p class="title is-4 no-padding">Atsui</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
							<footer class="card-footer">
								<div class="container">
									<div class="content has-text-centered">
										<div class="soc has-text-primary">
											<a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
										</div>
									</div>
								</div>
							</footer>
                        </div>
                    </div>
                </div>
                <div class="column is-one-third">
                    <div class="card large round">
                        <div class="card-image ">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content ">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content media-content-u ">
                                    <p class="title is-4 no-padding">Atsui</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
							<footer class="card-footer">
								<div class="container">
									<div class="content has-text-centered">
										<div class="soc has-text-primary">
											<a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
										</div>
									</div>
								</div>
							</footer>
                        </div>
                    </div>
                </div>
				<div class="column is-one-third">
                    <div class="card large round">
                        <div class="card-image ">
                            <figure class="image">
                                <img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
                            </figure>
                        </div>
                        <div class="card-content ">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-96x96">
                                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content media-content-u ">
                                    <p class="title is-4 no-padding">Atsui</p>
                                    <p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
                                    <p class="subtitle is-6">Moderator</p>
                                </div>
                            </div>
                            <div class="content">
                                 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
                            </div>
							<footer class="card-footer">
								<div class="container">
									<div class="content has-text-centered">
										<div class="soc has-text-primary">
											<a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
											<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
										</div>
									</div>
								</div>
							</footer>
                        </div>
                    </div>
				 </div>
            </div><!-- End row2  -->			
    <footer class="footer">
            <div class="container">
                <div class="content has-text-centered">
                    <div class="soc">
                        <a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
                        <a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
                        <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
                        <a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
                    </div>
                    <p>
                        <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>.
                        The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <br>
                    </p>
                </div>
            </div>
        </footer>
            <script src="../js/bulma.js"></script>
</div>
</body>

</html>
